<template>
    <div class="xc-container" v-resizeob="resizeEcharts">
        <div class="left">
            <cards class="left-one" title="今日数据">
                <div class="pro-charts characters-box">
                    <div class="info-item">
                        <img src="../../assets/screen/组-20.png" alt="">
                        <div class="characters">
                            <span class="text">今日新增保障</span>
                            <span class="num">12</span>
                            <span>个</span>
                        </div>
                    </div>
                    <div class="info-item">
                        <img src="../../assets/screen/组-20.png" alt="">
                        <div class="characters">
                            <span class="text">今日新增保障</span>
                            <span class="num">12</span>
                            <span>个</span>
                        </div>
                    </div>
                    <div class="info-item">
                        <img src="../../assets/screen/组-20.png" alt="">
                        <div class="characters">
                            <span class="text">今日新增保障</span>
                            <span class="num">12</span>
                            <span>个</span>
                        </div>
                    </div>
                    <div class="info-item">
                        <img src="../../assets/screen/组-20.png" alt="">
                        <div class="characters">
                            <span class="text">今日新增保障</span>
                            <span class="num">12</span>
                            <span>个</span>
                        </div>
                    </div>
                    <div class="info-item">
                        <img src="../../assets/screen/组-20.png" alt="">
                        <div class="characters">
                            <span class="text">今日新增保障</span>
                            <span class="num">12</span>
                            <span>个</span>
                        </div>
                    </div>
                    <div class="info-item">
                        <img src="../../assets/screen/组-20.png" alt="">
                        <div class="characters">
                            <span class="text">今日新增保障</span>
                            <span class="num">12</span>
                            <span>个</span>
                        </div>
                    </div>
                </div>
            </cards>
            <cards class="left-two" title="服务器统计">
                <div class="pro-charts">
                    <el-table :data="tableData" style="width: 100%;" height="100%" :highlight-current-row="false"
                        :header-cell-style="{
        color: '#fff',
        background: '#0a3370',
        fontWeight: '700',
    }" :row-class-name="tableRowClassName">

                        <el-table-column prop="model" label="服务器型号" width="190">
                        </el-table-column>
                        <el-table-column prop="run" label="正在运行">
                        </el-table-column>
                        <el-table-column prop="fault" label="故障">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button @click="detailRow(scope.row)" type="text" size="small">
                                    详情
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </cards>
            <cards class="left-three" title="故障统计">
                <div class="pro-charts total-data">
                    <div class="title">
                        <span>近30天报障</span>
                        <span>数据统计</span>
                    </div>
                    <div class="line"></div>
                    <div class="con">
                        <div class="item-pro-con">
                            <div>故障11个</div>
                            <div>咨询1个</div>
                            <div>服务请求1个</div>
                            <div>投诉意见1个</div>
                        </div>
                        <div class="item-pro-con">
                            <div>报障统计26个</div>
                            <div>告警统计11个</div>
                            <div>知识统计4个</div>
                        </div>


                    </div>


                </div>
            </cards>
        </div>
        <div class="center">
            <div class="maps-box" ref="map"></div>
            <div class="center-down">
                <div class="roll-title">
                    <span class="roll-item">工单编码</span>
                    <span class="roll-item">事件性质</span>
                    <span class="roll-item">所属区域</span>
                    <span class="roll-item">提报单位</span>
                    <span class="roll-item">工单状态</span>
                    <span class="roll-item">受理人</span>
                </div>
                <div class="seamlessRolling" @click="lookClick($event)">
                    <vue-seamless-scroll :data="msgData" :class-option="classOption">

                        <div class="scroll-box" v-for="(item, index) in msgData" :key="item.id">
                            <span class="li-item">{{ item.id }}</span>
                            <span class="li-item">{{ item.event }}</span>
                            <span class="li-item">{{ item.region }}</span>
                            <span class="li-item">{{ item.reportingUnit }}</span>
                            <span class="li-item">{{ item.state }}</span>
                            <span class="li-item">{{ item.accepted }}</span>
                        </div>
                    </vue-seamless-scroll>
                </div>
            </div>
        </div>
        <div class="right">
            <cards class="right-one" title="设备故障分析">
                <div id="echarts_6" class="pro-charts"></div>
            </cards>
            <cards class="right-two" title="处理工单Top5">
                <div id="echarts_5" class="pro-charts"></div>
            </cards>
        </div>
    </div>
</template>

<script>
import changzhi from "@/json/changzhi.json";
import vueSeamlessScroll from "vue-seamless-scroll";
import * as echarts from 'echarts';
let chartLabelBg = require('../../assets/screen/pos.png')
export default {
    data() {
        return {
            mapChart: null,
            mapData: [
                {
                    name: '沁原县'
                },
                {
                    name: '沁县'
                },
                {
                    name: '武乡县'
                },
                {
                    name: '黎城县'
                },
                {
                    name: '襄垣县'
                },
                {
                    name: '屯留区'
                },
                {
                    name: '潞城区'
                },
                {
                    name: '潞州区'
                },
                {
                    name: '上党区'
                },
                {
                    name: '长子县'
                },
                {
                    name: '壶关县'
                },
                {
                    name: '平顺县'
                }
            ],
            tableData: [{
                model: '玉龙PF系列飞腾笔记本',
                run: '2',
                fault: '1'
            }, {
                model: '凌云MF系列一体机',
                run: '10',
                fault: '0'
            },
            {
                model: '玉龙DL系列龙芯台式机',
                run: '11',
                fault: '0'
            },
            {
                model: '长缨CL7351工控机',
                run: '30',
                fault: '0'
            },
            {
                model: '手持平板设备',
                run: '49',
                fault: '0'
            },
            {
                model: '晨月SF系列机架式服务器',
                run: '18',
                fault: '0'
            }],
            msgData: [
                {
                    id: 'p2020103111',
                    event: '故障',
                    region: "武乡维修站",
                    reportingUnit: "武乡中学",
                    state: "已分派",
                    accepted: "李某",
                },
                {
                    id: 'p2020103112',
                    event: '故障',
                    region: "襄垣维修站",
                    reportingUnit: "襄垣中学",
                    state: "已分派",
                    accepted: "李某",
                },
                {
                    id: 'p2020103113',
                    event: '故障',
                    region: "襄垣维修站",
                    reportingUnit: "襄垣中学",
                    state: "待分派",
                    accepted: "李某",
                },
                {
                    id: 'p2020103114',
                    event: '故障',
                    region: "武乡维修站",
                    reportingUnit: "武乡中学",
                    state: "已分派",
                    accepted: "王某",
                },
                {
                    id: 'p202010315',
                    event: '故障',
                    region: "武乡维修站",
                    reportingUnit: "武乡中学",
                    state: "待分派",
                    accepted: "李某",
                },
            ],
        };
    },
    components: { vueSeamlessScroll },
    computed: {
        classOption() {
            return {
                step: 0.5, // 数值越大速度滚动越快
                limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
            };
        },
    },
    mounted() {
        this.$nextTick(() => {
            this.getMap()
        })
        // 设备故障分析
        this.myChart6 = echarts.init(document.getElementById("echarts_6"));
        var option6 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['产品数量'],
                top: 'bottom',
                textStyle: {
                    color: '#f2f2f2',
                    fontWeight: 'normal'
                }
            },
            grid: {
                show: false, //是否显示直角坐标系网格
                top: "10%", // 一下数值可为百分比也可为具体像素值
                bottom: "15%",
                left: "10%",
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01],
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: '#243e5d'
                    }
                }
            },
            yAxis: {
                type: 'category',
                data: ['鼠标', '网卡', '通信', '内存', '办公', '其他', '显卡', 'cpu', '硬盘', '键盘'],
                axisLine: {
                    lineStyle: {
                        color: "#243e5d",
                    },
                },
                axisLabel: {
                    textStyle: {
                        color: '#969a9e',
                    },
                },
                axisTick: {
                    show: false,
                }
            },
            series: [
                {
                    name: '2011',
                    type: 'bar',
                    data: [4, 3, 1, 3, 4, 4, 5, 10, 11, 3, 5, 7],
                    color: '#3d90e8'
                },
            ]
        };
        option6 && this.myChart6.setOption(option6);

        //top5
        this.myChart5 = echarts.init(document.getElementById("echarts_5"));
        let option5 = {
            grid: {
                top: 30,
                bottom: 20
            },
            xAxis: [
                {
                    data: [
                        "沁源",
                        "潞城",
                        "长子",
                        "平顺",
                        "上党",
                    ],
                    axisLabel: {
                        color: "#fff",
                        fontSize: 10
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    }
                }
            ],
            yAxis: [
                {
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#182450"
                        }
                    },
                    axisLabel: {
                        color: "#8CB5E2"
                    }
                }
            ],
            // 使用内部缩放（滚轮缩放、鼠标拖着左右滑动）
            dataZoom: [
                {
                    type: "inside",
                    minValueSpan: 6, // 最小展示数
                    start: 0, // 开始展示位置（默认）
                    end: 5 // 结束展示位置 （默认）
                }
            ],
            series: [
                {
                    name: "hill",
                    // 象柱形图
                    type: "pictorialBar",
                    // 同一系列的柱间距离
                    barCategoryGap: "-60%",
                    // 自定义svg 图标 (三角锥形的关键)
                    symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
                    // 默认样式
                    itemStyle: {
                        label: {
                            show: false
                        },
                        borderColor: "#206fde",
                        borderWidth: 2,
                        color: {
                            colorStops: [
                                {
                                    offset: 0,
                                    color: "rgba(0,238,255, 0.09)"
                                },
                                {
                                    offset: 1,
                                    color: "rgba(29,111,218, 0.5)"
                                }
                            ]
                        }
                    },
                    // 鼠标滑过样式
                    emphasis: {
                        label: {
                            show: true,
                            position: "top",
                            color: "#12DCFF"
                        },
                        itemStyle: {
                            borderColor: "#17cdfa",
                            borderWidth: 2,
                            color: {
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "rgba(0,238,255, 0.09)"
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(23,205,250, 0.5)"
                                    }
                                ]
                            }
                        }
                    },
                    data: [
                        15,
                        18,
                        12,
                        23,
                        56
                    ],
                    z: 10
                }
            ]
        }

        option5 && this.myChart5.setOption(option5);
    },
    methods: {
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex % 2 == 0) {
                return "";
            } else {
                return "warning-row";
            }
        },
        getMap() {
            this.mapChart = this.$echarts.init(this.$refs.map, null, { devicePixelRatio: 4 });
            this.$echarts.registerMap("changzhi", changzhi);
            let mapOptions = {
                geo3D: {
                    // top: -80,
                    map: "changzhi", //注册地图的名字
                    roam: true, //开启鼠标缩放和平移漫游。默认不开启
                    // boxHeight: 20,
                    tooltip: {
                        show: true,
                        trigger: "axis",
                    },
                    itemStyle: {
                        color: "#1d3971", // 背景
                        opacity: 0.4, //透明度
                        borderColor: "#5698dc",
                        borderWidth: 2.5,
                        shadowColor: "#204077",
                        shadowOffsetX: 20,
                        shadowOffsetY: 20,
                        shadowBlur: 300,
                    },
                    label: {
                        show: true,
                        distance: 0,
                        color: '#fff',
                        padding: [6, 4, 2, 4],
                        fontSize: 18,
                        textBorderColor: 'rgba(30, 128, 192, 1)',
                        textBorderWidth: 1,
                        textShadowBlur: 2,
                        textShadowColor: 'rgba(86, 126, 155, 1)',
                        formatter: (data) => {
                            return `${data.name}\n{cIcon|}`
                        },
                        rich: {
                            cIcon: {
                                width: 30,
                                height: 23,
                                align: 'center',
                                backgroundColor: {
                                    image: chartLabelBg,
                                    opacity: 0.1
                                },
                            },
                        }
                    },
                    //当鼠标放上去  地区区域是否显示名称
                    emphasis: {
                        label: {
                            show: true,
                            textStyle: {
                                color: "#ffffff",
                                fontSize: 4,
                            },
                        },
                        itemStyle: {
                            borderColor: "#156856",
                            opacity: 0.8
                        }
                    },
                    shading: "realistic",
                    //光照阴影
                    light: {
                        //光照阴影
                        main: {
                            color: "#fff", //光照颜色
                            intensity: 1.2, //光照强度
                            shadowQuality: 'high', //阴影亮度
                            shadow: true, //是否显示阴影
                            alpha: 20,
                            beta: 50,
                        },
                        ambient: {
                            color: '#66b2f9',
                            intensity: 1,
                        },
                    },
                    //用于鼠标控制地图旋转等功能
                    viewControl: {
                        // 用于鼠标的旋转，缩放等视角控制。
                        projection: "perspective", // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
                        autoRotate: false, // 是否开启视角绕物体的自动旋转查看。[ default: false ]
                        autoRotateDirection: "cw", // 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
                        autoRotateSpeed: 10, // 物体自传的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
                        autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
                        damping: 0, // 鼠标进行旋转，缩放等操作时的迟滞因子，在大于等于 1 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。[ default: 0.8 ]
                        rotateSensitivity: 2, // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。   rotateSensitivity: [1, 0]——只能横向旋转； rotateSensitivity: [0, 1]——只能纵向旋转。
                        zoomSensitivity: 5, // 缩放操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法缩放。
                        panSensitivity: 5, // 平移操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法平移。支持使用数组分别设置横向和纵向的平移灵敏度
                        panMouseButton: "left", // 平移操作使用的鼠标按键，支持：'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
                        rotateMouseButton: "left", // 旋转操作使用的鼠标按键，支持：'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)

                        distance: 145, // [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。
                        minDistance: 40, // [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。
                        maxDistance: 400, // [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。

                        alpha: 50, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
                        beta: 60, // 视角绕 y 轴，即左右旋转的角度。[ default: 0 ]
                        minAlpha: -5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
                        maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
                        minBeta: -80, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
                        maxBeta: 80, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]

                        center: [0, -20, 0], // 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。左右 上下 前后

                        animation: true, // 是否开启动画。[ default: true ]
                        animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
                        animationEasingUpdate: "cubicInOut", // 过渡动画的缓动效果。[ default: cubicInOut ]
                    },
                    //修改选中区域的样式
                    regions: [
                    ],
                    silent: false,
                    regionHeight: 5, //修改整个地图的三维高度
                    data: this.mapData
                },
            }
            this.mapChart.setOption(mapOptions);
        },
        detailRow(row) {
            console.log(row);
            window.open('http://127.0.0.1:5500/src/transparent.html', '_blank')
        },
        resizeEcharts() {
            this.myChart5.resize()
            this.myChart6.resize()
        },
        lookClick(e) {
            if (e.target.className == "handle") {
                console.log(e.target.id);
                console.log(e.target.dataset.tit);
            }
        },
    },


};
</script>

<style lang='less' scoped>
.xc-container {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    gap: 10px;
}

.xc-container .left {
    width: 29%;
    height: 100%;
    display: flex;
    gap: 1.6%;
    flex-direction: column;

    .left-one,
    .left-two,
    .left-three {
        width: 100%;
        height: 32%;
    }
}

.xc-container .center {
    width: 40%;
    height: 100%;
}

.maps-box {
    width: 100%;
    height: 60%;
}

.center-down {
    height: 35%;
    margin-bottom: 20px;
    width: 100%;

}

.seamlessRolling {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: #afcbf1;
    padding-left: 10px;
    box-sizing: border-box;

    .scroll-box {
        height: 40px;
        line-height: 40px;
        display: flex;
        justify-content: space-between;

        .li-item {
            width: 110px;
            text-align: center;
        }

        .handle {
            cursor: pointer;
        }
    }
}

.scroll-box:nth-child(odd) {
    background: #1d4e8c;
    opacity: 0.3;
}

.xc-container .right {
    width: 29%;
    height: 100%;
    // background: #baf;
    display: flex;
    flex-direction: column;
    gap: 1.6%;

    .right-one,
    .right-two {
        width: 100%;
        height: 50%;
    }
}

.pro-charts {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 5px;
}

.characters-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;

}

.info-item {
    border: 1px solid red;
    width: 100%;
    height: 100%;
    display: flex;
    // line-height: 30px;
    text-align: center;
}

.characters {
    color: #edfbff;

    .text {
        display: block;
        background: url('@/assets/screen/bg-21.png') no-repeat;
        background-size: 100% 100%;
    }

    .num {
        font-size: 26px;
        text-shadow: 0 0 10px #59bcf9, 0 0 20px #59bcf9, 0 0 30px #59bcf9, 0 0 40px #59bcf9;
    }
}

.total-data {
    padding: 10px 0;
    box-sizing: border-box;

    .title {
        color: #fff;
        display: flex;
        justify-content: space-around;
    }

    .line {
        width: 100%;
        height: 1px;
        background-color: #033f77;
        padding: 0 30px;
        margin: 10px 0;
        box-sizing: border-box;
    }

    .con {
        display: flex;
        justify-content: space-around;
        color: #afcbf1;

        .item-pro-con {
            div {
                margin: 14px 0;
            }
        }
    }
}

.roll-title {
    display: flex;
    justify-content: space-between;
    color: #ffffff;
    font-size: 16px;
    padding-left: 10px;
    box-sizing: border-box;
    background-color: #1d4e8c;
    opacity: 0.6;
    height: 40px;
    line-height: 40px;

    .roll-item {
        width: 110px;
        text-align: center;
    }
}

.center-down {
    height: 35%;
    margin-bottom: 20px;
    width: 100%;
}

// ----------------

// 表格部分样式
// 最外层透明
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
    background-color: transparent;
    color: #93dcfe;
    font-size: 24px;
}
::v-deep .el-table th{
    border: 0;
}
::v-deep .el-table th.el-table__cell.is-leaf {
    border-bottom: 0px !important;
}
// 表格内背景颜色 
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
    background-color: transparent;
    border: 0px;
    color: #afcbf1;
    font-size: 16px;
    height: 5px;
    font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
    font-weight: Normal;
}

// 去掉最下面的那一条线 
.el-table::before {
    height: 0px;
}

// 设置表格行高度
::v-deep .el-table__body tr,
::v-deep .el-table__body td {
    padding: 0;
    // height: 54px;
}

// 修改高亮当前行颜色
::v-deep .el-table tbody tr:hover>td {
    background: #063570 !important;
}

// 取消当前行高亮
// ::v-deep .el-table tbody tr {
//   pointer-events: none;
// }

// 修改表头样式-加边框
::v-deep .el-table__header-wrapper {
    // border: solid 1px #04c2ed;
    // box-sizing: border-box;
}

// 表格斑马自定义颜色
::v-deep .el-table__row.warning-row {
    background: #063570;
}

// 滚动条样式
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
    background-color: #063570;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    width: 10px;
    opacity: 0.5;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 15px;
    background-color: #0257aa;
}
</style>